<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <el-form-item style="height: 62px;margin-left: -5px;margin-top: 40px" prop="username">
      <div style="background-image: url('https://promote-source.oss-cn-hangzhou.aliyuncs.com/source/wx/denglu%20%20kuang.png');background-size: cover;width: 100%;height: 100%;">
      <el-input  style="margin-left: 5px;"  size="small"
                name="username"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.username"
                :placeholder="$t('login.username')">
        <i slot="prefix" style="margin-left: 5px"
       class="iconfont">&#xe8c8;</i>
      </el-input>
      </div>
    </el-form-item>
    <el-form-item style="height: 60px;margin-left: -5px" prop="password">
      <div style="background-image: url('https://promote-source.oss-cn-hangzhou.aliyuncs.com/source/wx/denglu%20%20kuang.png');background-size: cover;width: 100%;height: 100%">
        <el-input style="margin-left: 5px;"  size="small"
                name="password"
                @keyup.enter.native="handleLogin"
                :type="passwordType"
                v-model="loginForm.password"
                :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon"
           slot="suffix"
           @click="showPassword"></i>
          <i slot="prefix" style="margin-left: 5px"
             class="iconfont">&#xe6bf;</i>
      </el-input>
      </div>
    </el-form-item>
<!--    <el-form-item v-if="captchaMode"  style="height: 60px;margin-left: -5px"  prop="code">-->
<!--      <el-row :span="24">-->
<!--        <el-col :span="15">-->
<!--            <div style="background-image: url('https://promote-source.oss-cn-hangzhou.aliyuncs.com/source/wx/%E7%9F%A9%E5%BD%A2%203%20%E6%8B%B7%E8%B4%9D%204.png');background-size: cover;width: 100%;height: 100%">-->
<!--              <el-input style="margin-left: 5px;margin-top: 2px"  size="small"-->
<!--                    @keyup.enter.native="handleLogin"-->
<!--                    v-model="loginForm.code"-->
<!--                    auto-complete="off"-->
<!--                    :placeholder="$t('login.code')">-->
<!--                <i slot="prefix" style="margin-left: 5px"-->
<!--                   class="iconfont">&#xe777;</i>-->
<!--          </el-input>-->
<!--            </div>-->
<!--        </el-col>-->
<!--        <el-col :span="9">-->
<!--          <div class="login-code">-->
<!--            <img :src="loginForm.image" class="login-code-img" @click="refreshCode"/>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form-item>-->
    <el-form-item v-if="captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="12">
          <el-checkbox v-model="checked" style="margin-left: 12px" class="remeberPwd" ><span style="color: #f8f8f8">记住密码</span></el-checkbox>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button
                 id = "login"
                 type="primary"
                 size="small"
                 @click.native.prevent="handleLogin"
                 class="login-submit">{{$t('login.submit')}}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {mapGetters} from "vuex";
  import website from '@/config/website';
  import {getCaptcha} from "@/api/user";
  import {getTopUrl} from "@/util/util";
  import {info} from "@/api/system/tenant";
  import {getStore, setStore} from "../../util/store";
  import webiste from "@/config/website";

  export default {
    name: "userlogin",
    data() {
      return {
        checked: true,

        tenantMode: website.tenantMode,
        captchaMode: website.captchaMode,
        frisstpath: website.fistPage.value,
        loginForm: {
          //租户ID
          tenantId: "731030",
          //用户名
          username: "",
          //密码
          password: "",
          //账户类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "",
        },
        loginRules: {
          tenantId: [
            {required: false, message: "请输入租户ID", trigger: "blur"}
          ],
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
          ]
        },
        passwordType: "password"
      };
    },
    created() {
      this.account()
      this.getTenant();
      this.refreshCode();
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["tagWel"])
    },
    props: [],
    methods: {
      test(){
        alert(1)
      },
      account() {
        this.loginForm.username = getStore({name:"username"});
        this.loginForm.password = getStore({name:"password"});

      },

      setCookie(c_name, c_pwd) {
        //账号，密码 ，过期的天数
        setStore({name: 'username', content: c_name})
        setStore({name: 'password', content: c_pwd})
      },

      clearCookie() {
        this.setCookie("", ""); //清除cookie
      },

      refreshCode() {
        getCaptcha().then(res => {
          const data = res.data.data;
          this.loginForm.key = data.key;
          this.loginForm.image = data.image;
        })
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
      handleLogin() {
        webiste.username = this.loginForm.username
        let _this = this;

        this.$refs.loginForm.validate(valid => {
          console.log(this.tagWel,"this.tagWel")
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });

            if (_this.checked == true) {
              //存入cookie
              _this.setCookie(
                _this.loginForm.username,
                _this.loginForm.password
              ); //保存7天
            } else {
              _this.clearCookie();
            }


            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              // this.$router.push({path: this.tagWel.value});
              this.$router.push({path: website.fistPage.value});
              this.$store.commit("SET_ROUTERNAME",'首页');
              loading.close();
            }).catch(() => {
              loading.close()
            });

          }
        });
      },
      getTenant() {
        let domain = getTopUrl();
        // 临时指定域名，方便测试
        //domain = "https://bladex.vip";
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.tenantMode = false;
            this.loginForm.tenantId = data.data.tenantId;
          }
        })
      }
    }
  };

  document.onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==13){
      document.getElementById("login").click();
    }
  };
</script>

<style>
@import "../../assets/myicon/iconfont.css";

.login-form .el-input input{
  border-bottom:0px !important;
 height:60px !important;
  padding-bottom: 0px !important;
}
.login-form .el-input__prefix{
  line-height: 60px;
}
</style>
